<template>
    <div class="connect-store">

        <!-- 加载中 -->
        <UxLoading2 v-if="loading" />

        <!-- 当前品牌连接的店铺为空 -->
        <div class="connect-linked-nodata" v-else-if="stores.length == 0 && linked">
            <svg-icon name="user-shop" />
            <span>No linked store found.</span>
            <button type="primary" @click="reInit('unlink')">Link</button>
        </div>

        <!-- 当前品牌要绑定 -->
        <div class="connect-list" v-else>
            <h3>
                <span>Store name</span>
                <span>Synced item quantity</span>
                <span>Link</span>
            </h3>

            <div class="connect-list-nodata" v-if="stores.length == 0">
                <img src="https://img.podpartner.com/static/images-20230202/brand/connect-store-nodata.png" alt="">
                <strong>You haven't connected any online store.</strong>
                <span>Connecting your PODpartner account to an online store allows you to publish and sell your stunning products without effort. After doing so, you can link your hang tag/ packaging bag to your online store and create a strong brand identity.</span>
                <button type="primary" @click="$router.push('/user/store') ">Connect store</button>
            </div>

            <!-- 有数据 -->
            <ul v-else>
                <li :class="{ loading: item.loading }" v-for="item in stores" :key="item.id" v-loading="item.loading">
                    <StoreIconName :item='item'></StoreIconName>
                    <strong v-text="item.sync_count"></strong>
                    <span>
                        <em @click="setBind(item)" :class="{active:item.bind}"></em>
                    </span>
                </li>
            </ul>

            <UxLoading2 :loading="loading" />

        </div>

        <!-- 绑定与解除绑定弹窗 -->
        <BrandingConnectStoreNotify v-if="binding" :option="binding" @close="binding.close($event)" @success="binding.success($event)" />

    </div>
</template>
<script>
export default {
    name: "ConnectStore",
    props: {
        detail: { type: Object, default: () => { return null } },
        type: { type: String, default: '' },
        filter: { type: String, default: 'unlink' }
    },
    data () {
        return {
            stores: [],
            binding: null,
            loading: false,
            linked: false,
            add_connect: '',
        };
    },
    computed: {
        keyname () {
            return {
                'hangtag': 'tag_design_id',
                'package': 'pack_design_id',
            }[this.type];
        }
    },
    methods: {

        // 获取列表
        async getStore (getproduct) {
            this.loading = true;
            const response = await this.$http("UserStore.getAllLinkStore");

            if (response.code == 0) {
                const list = response.data || [];
                this.stores = list.filter(item => {
                    item.loading = false;
                    item.bind = item[this.keyname] && item[this.keyname] == this.detail.id;
                    if (this.linked) {
                        // 只要已经连接的
                        return item.bind;
                    } else {
                        return !item.bind;
                    }
                });
                this.loading = false;
            } else {
                this.loading = false;
                this.$uxMessage.error(response.msg || "error");
            }
        },

        // 修改绑定
        setBind (item) {

            const type = { 'hangtag': 'tag', 'package': 'pack' }[this.type];
            const brand = item.bind ? null : this.detail;
            this.binding = {
                store: item,
                brand: brand,
                type: type,
                close: () => {
                    this.binding = null;
                },
                success: (store) => {
                    const id = (brand || {}).id || 0;

                    if (type == 'tag') {
                        item.tag_design_id = id;
                    } else if (type == 'pack') {
                        item.pack_design_id = id;
                    }

                    this.$emit('update')
                    this.$set(item, 'bind', !!id)
                    this.binding = null;
                }
            }
        },


        reInit (filter) {

            this.linked = filter == 'linked';
            this.loading = true;
            if (!this.detail.id) {
                this.loading = false;
            } else {
                this.getStore();
            }

        },
    },
    created () {
        this.reInit(this.filter);
    },
};
</script>
<style lang="scss" scoped>
.connect-store {
    width: 644px;
    height: 408px;
    display: flex;
    flex-direction: column;
    & > .loading {
        border-radius: 10px;
    }
}

.connect-linked-nodata {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    svg {
        width: 80px;
        height: 80px;
        background: #f0f0f0;
        padding: 20px;
        border-radius: 80px;
        box-sizing: border-box;
    }

    span {
        margin-top: 20px;
        height: 18px;
        font-size: 14px;
        color: #555555;
        line-height: 18px;
    }

    button {
        margin-top: 20px;
        font-size: 14px;
        width: 200px;
        height: 38px;
        background: #ea4c89;
    }
}

.connect-list {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 12px;

    h3 {
        display: flex;
        height: 36px;
        line-height: 36px;
        align-items: center;
        background: #f0f0f0;
        border-radius: 2px 0px 0px 2px;

        span {
            height: 22px;
            line-height: 22px;
            font-size: 14px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 400;
            color: #000000;
            text-align: center;

            &:nth-child(1) {
                flex: 240;
            }

            &:nth-child(2) {
                flex: 240;
            }

            &:nth-child(3) {
                flex: 160;
            }

            & + span {
                border-left: 1px solid #d8d8d8;
            }
        }
    }
    .connect-list-nodata {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img {
            width: 80px;
            height: 80px;
        }
        strong {
            margin-top: 16px;
            font-size: 16px;
            color: #000000;
            line-height: 24px;
            text-align: center;
        }
        span {
            margin-top: 6px;
            font-size: 14px;
            color: #555555;
            line-height: 20px;
            max-width: 520px;
            text-align: center;
        }
        button {
            margin-top: 22px;
            width: 200px;
            height: 38px;
            font-size: 14px;
        }
    }

    & > ul {
        flex: 1;
        overflow: auto;
        padding: 4px 0;
        li {
            margin-top: 8px;
            display: flex;
            align-items: center;
            position: relative;
            height: 60px;
            background: #f6f6f6;
            border-radius: 6px;

            .shop-name {
                flex: 240;
                box-sizing: border-box;
                justify-content: flex-start;

                &::v-deep {
                    figure {
                        margin-left: 26px;
                    }
                    span {
                        flex: 1;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        font-size: 14px;
                        color: #000000;
                    }
                }
            }

            & > strong {
                flex: 240;
                text-align: center;
                font-weight: normal;
                color: #000;
                font-size: 14px;
            }

            & > span {
                position: relative;
                flex: 160;
                display: flex;
                justify-content: center;

                em {
                    display: inline-block;
                    position: relative;
                    width: 40px;
                    height: 22px;
                    background: #c6c6c6;
                    border-radius: 22px;
                    cursor: pointer;

                    &:before {
                        content: '';
                        position: absolute;
                        left: 2px;
                        top: 2px;
                        width: 18px;
                        height: 18px;
                        border-radius: 18px;
                        background: #fff;
                        transition: all 0.2s ease;
                    }
                    &.active {
                        border-color: #ea4c89;
                        background-color: #ea4c89;
                        &:before {
                            left: 20px;
                        }
                    }
                }
            }
        }
    }
}
</style>
